<template>
  <view>
    <view class="search-box">
      <!-- 基本用法 -->
      <uni-search-bar :radius="100" cancelButton="none" @input="input"></uni-search-bar>
    </view>

    <!-- 搜索建议列表 -->
    <view class="search-list" v-if="searchResult.length !==0">
      <view class="search-item" v-for="(item,i) in searchResult" :key="i" @click="gotoDetail(item.goods_id)">
        <text class="text">{{item.goods_name}}</text>
        <uni-icons  type="arrowright" size="17"></uni-icons>
      </view>
    </view>

    <!-- 搜索历史 -->
    <view class="history-box" v-else>
      <!-- 标题区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
      </view>
      <!-- 列表区域 -->
      <view class="history-list" > 
         <uni-tag :text="item" v-for="(item,i) in historyList" :key="i" type="default" @click="gotoGoodsList(item)"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 延时器Id
        timeId: null,
        // 搜索关键词
        keyword: '',
        searchResult: [], //搜索结果
        // 搜索关键词的历史记录
        historyList: []
      };
    },
    // 生命周期函数进入页面加载
    onLoad() {
      // 加载本地存储的搜索历史记录
    this.historyList=  JSON.parse(uni.getStorageSync('keword') || '[]')
    },
    methods: {
      input(e) {
        // 清除 timer 对应的延时器
        clearTimeout(this.timeId)

        // 重新启动一个延时器，并把 timerId 赋值给 this.timeId
        this.timeId = setTimeout(() => {
          // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
          this.keyword = e.value

          this.getSearchResult()

          console.log(e.value)
        }, 500)
      },

      // 搜索建议
      async getSearchResult() {
        // 判断搜索关键词是否为空
        if (this.keyword === '') {
          this.searchResult = []
          return
        }

        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch?query='+ this.keyword, )

        if (res.meta.status !== 200) return uni.$showMsg()
        console.log(res)

        this.searchResult = res.message
        
         // 1. 查询到搜索建议之后，调用 saveSearchHistory() 方法保存搜索关键词
         this.saveSearchHistory()
      },
        // 跳转到详情页
      gotoDetail(goods_id) {
        console.log(goods_id)
        uni.navigateTo({
          // 指定详情页面的 URL 地址，并传递 goods_id 参数
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id
        })
      },
      // 保存关键词到搜索历史中
      saveSearchHistory(){
        
        // 存储搜索历史记录
          // 要求：不要有重复历史记录、最新的排在最前面
          const index = this.historyList.indexOf(this.keyword)
          // 如果关键词重复删除原来的
          if(index !==-1) {
            this.historyList.splice(index,1)
          }
          // 把关键词追加到头部
        this.historyList.unshift(this.keyword)
        
        // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
        uni.setStorageSync('keword',JSON.stringify(this.historyList))
      },
      
      // 清空历史记录
      cleanHistory(){
        console.log(11)
        // 清空data中historylist和本地存储的记录
        this.historyList = []
        uni.clearStorageSync('keyword')
      },
      
      // 点击跳转到商品列表页面
      gotoGoodsList(keyword) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?query=' + keyword
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-list {
    padding: 0 5px;

    .search-item {
      font-size: 12px;
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;

      .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 3px;
      }
    }
  }
  
  .history-box{
     padding: 0 5px;
    .history-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      font-size: 13px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .history-list{
      display: flex;
      flex-wrap: wrap;
      
      uni-tag {
        margin: 5px 5px 0px 0px;
      }
    }
  }
</style>
